﻿
@{
    Layout = "";
}
<style>
    .triangle-up {
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 9px solid #f2f2f2;
        position: absolute;
        top: -9px;
        z-index: 18;
        left: 20px;
    }

    .w_sjReply {
        font-size: 14px;
        line-height: 20px;
        background-color: #f2f2f2;
        border-radius: 3px;
        padding: 5px;
        position: relative;
        margin-top: 10px;
    }

        .w_sjReply font {
            float: left;
        }

    .w_excdtl_menu {
        background: #fff;
        border-bottom: #E5E5E5 1px solid;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 5;
    }

    .w_excdetil_allpro {
        margin-top: 45px;
        margin-bottom: 10px;
    }

    .w_jfxqbot_fixed {
        z-index: 5 !important;
    }

    .about-area {
        margin-bottom: 66px;
    }

    .f_time_ing {
        background: url(/Content/images/w_52.png) no-repeat center center;
        background-size: 100%;
    }

        .f_time_ing .w_countdown {
            width: 80%;
            height: 54px;
            line-height: 54px;
            color: #fff;
        }

    .w_cutd_time {
        display: inline-block;
        float: initial;
    }

    .w_cutd_font {
        float: initial;
    }

    .f_time_out {
        background: #dcdcdc;
        width: 100%;
    }

        .f_time_out .w_countdown {
            width: 100%;
            height: 54px;
            line-height: 54px;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 15px;
        }

    .w_cutd_time {
        font-weight: bold;
        color: #fff;
    }

    .w_prodetl_aa p.grab_end {
        font-style: oblique;
        font-weight: bold;
        font-size: 110%;
    }

    .f_time_out .w_qgspDetl_aRight {
        display: none;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        *+height:1%;
    }

    .w_prodetl_aa {
        overflow: inherit;
    }

    .pj_show{}
			.pj_ul{float: right;}
			.pj_ul li{float: left;width:50px;text-align: center !important;}
			.pj_ul li .icon_box{margin:0 auto;}
			.bad .icon_box{width: 20px;height: 20px;background: url(/Content/images/bad_a.png) no-repeat center;-webkit-background-size: 100%;
			background-size: 100%;}
			.pj_ul li.bad.active .icon_box{width: 20px;height: 20px;background: url(/Content/images/bad_b.png) no-repeat center;-webkit-background-size: 100%;
			background-size: 100%;}
			.in .icon_box{width: 20px;height: 20px;background: url(/Content/images/in_a.png) no-repeat center;-webkit-background-size: 100%;
			background-size: 100%;}
			.pj_ul li.in.active .icon_box{width: 20px;height: 20px;background: url(/Content/images/in_b.png) no-repeat center;-webkit-background-size: 100%;
			background-size: 100%;}
			.good .icon_box{width: 20px;height: 20px;background: url(/Content/images/good_a.png) no-repeat center;-webkit-background-size: 100%;
			background-size: 100%;}
			.pj_ul li.good.active .icon_box{width: 20px;height: 20px;background: url(/Content/images/good_b.png) no-repeat center;-webkit-background-size: 100%;
			background-size: 100%;}
			.pj_ul li span{font-size:12px;text-align: center !important;}
</style>

<div class="w_loanDetail" ng-controller="ProductDetailCtrl" style="margin-bottom:51px;">
    <div class="w_excdtl_menu">
        <ul class="w_excdtlMenu_ul">
            <li class="w_exmenu_default"><a>商品</a></li>
            <li><a>详情</a></li>
            <li ng-click="CommentShow = false"><a>评价</a></li>
        </ul>
    </div>
    <!--商品-->
    <div class="w_excdetil_allpro w_change">
        <!--轮播图开始-->
        <div id="focus" class="focus fd_banner">
            <div class="hd">
                <ul>
                    <li class="on">1</li>
                    <li class="">2</li>
                    <li class="">3</li>
                </ul>
            </div>
            <div class="bd">
                <div class="tempWrap">
                    <ul>
                        <li ng-repeat="slide in slides">
                            <a>
                                <img ng-src="{{slide.image}}">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--轮播图结束-->

        <div class="w_jfdhxq_top">
            <div class="w_jfdhxq_topName">{{Product.Name}}</div>
            <p class="w_jfdhxq_topPost">{{Product.Description}}</p>
            <div class="w_prodetl_bb">
                <p ng-show="Product.Price>=Product.MaxPrice">￥<big>{{Product.Price}}</big></p>
                <p ng-show="Product.Price<Product.MaxPrice">￥<big>{{Product.Price}}</big>~<big>{{Product.MaxPrice}}</big></p>
                <del>￥{{Product.MarketPrice}}</del>
            </div>
            <div class="w_prodetl_aa clearfix">
                <span>已售 {{Product.SaleCount}}</span>
                <p>库存：{{Product.TotalStock}}</p>
            </div>
        </div>
        <div class="w_jfdhxq_property" ng-show="Product.TotalStock>0"><span>规格</span><a href="javascript:void(0)" class="w_jfdhxq_protycon"><i>{{SelectSpec.Id>0?SelectSpecText:'' }}</i>&nbsp;&nbsp;<em>{{SelectSpecNum}}件</em></a></div>
        @*<p class="w_jfdhxq_slide"><span>继续拖动查看商品详情</span></p>*@
    </div>
    <!--商品-->
    <!--底部-->
    <div class="w_jfxqbot_fixed" style="z-index:1000;" ng-show="ActivityId==0&&Product.TotalStock>0">
        <ul class="w_qgxqBot_a">
            <li ui-sref="shop.cart">
                <img src="/Content/images/w_54.png" class="w_qgxq_add" /><p class="w_qgxq_addNum">{{ShopCartCount}}</p>
                <p>购物车</p>
            </li>
            <li ng-click="Favorite()" ng-switch="IsFavorited">
                <img src="/Content/images/w_53.png" class="w_qgxq_collect" ng-switch-when="false" />
                <img src="/Content/images/w_53a.png" class="w_qgxq_collected" ng-switch-when="true" />
                <p>收藏</p>
            </li>
        </ul>
        <div class="w_qgxqBot_b">加入购物车</div>
        <div class="w_qgxqBot_c">立即购买</div>
    </div>
    <!--详情-->
    <div class="w_excdetil_detail w_change" style="display:none;">
        <div ng-bind-html="Product.Detail|to_trusted" id="detail"></div>
    </div>
    <!--详情-->
    <!--评价-->
    <div class="w_excdetil_com w_change" style="display:none;" infinite-scroll='reddit.nextPage(CommentShow)' infinite-scroll-disabled='reddit.busy' infinite-scroll-distance='1'>
        <div class="w_percom" ng-show="reddit.items.length>0" ng-repeat="comment in reddit.items">
            <div class="w_percom_top">
                <div class="w_percom_head"><img ng-src="{{comment.HeadUrl?'':comment.HeadUrl}}" /></div>
                <p>{{comment.NikName}}</p>
                <div>
                    <ul class="pj_ul clearfix">
                        <li class="good active" ng-show="comment.CommentLevel==3">
                            <div class="icon_box">

                            </div>
                            <span>好评</span>
                        </li>
                        <li class="in active" ng-show="comment.CommentLevel==2">
                            <div class="icon_box">
                            </div>
                            <span>中评</span>
                        </li>
                        <li class="bad active" ng-show="comment.CommentLevel==1">
                            <div class="icon_box">

                            </div>
                            <span>差评</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="w_percom_con">{{comment.DPContent}}</div>

            <div class="w_sjReply" ng-show="comment.ReplyContent">
                <div class="triangle-up"></div>
                <font color="#16a8f2">商家回复：</font>
                <p>{{comment.ReplyContent}}</p>
            </div>
            <ul class="w_percom_img">
                <li ng-repeat="img in comment.ImgList"><div><img ng-src="{{img?'':ImgHostUrl+img}}" /></div></li>
            </ul>
        </div>
    </div>
    <!--评价-->
    <!--限时抢购倒计时-->
    <div class="w_jfxqbot_fixed" ng-show="ActivityId>0">
        <div class="w_qgspDetl_a f_time_ing" id="spike_end" style="display:none;">
            <div class="w_countdown" id="times_container">
                <span class="w_cutd_font">距活动结束：</span>
                <p class="w_cutd_time">
                    <span id="times_day"> </span>天

                    <span id="times_hour"> </span>时

                    <span id="times_minute"> </span>分

                    <span id="second"> </span>秒
                </p>
            </div>
            <div class="w_qgspDetl_aRight" ng-click="Buy()">
                <div style="margin-top: 14px;">马上抢</div>
            </div>
        </div>
        <div class="w_qgspDetl_a f_time_ing" id="spike_begin" style="display:none;">
            <div class="w_countdown">
                <span class="w_cutd_font">距活动开始：</span>
                <p class="w_cutd_time">
                    <span id="times_day_begin"> </span>天

                    <span id="times_hour_begin"> </span>时

                    <span id="times_minute_begin"> </span>分

                    <span id="second_begin"> </span>秒
                </p>
            </div>
            <div class="w_qgspDetl_aRight">
                <div style="margin-top: 14px;font-size:16px;">即将开始</div>
            </div>
        </div>
    </div>

    <!-- 弹出商品规格属性 -->
    <div class="f_popBox"></div>
    <!-- 从下面弹出选择属性 -->
    <div class="hideGZ">
        <div class="fpopproBox">
            <div class="fpopproImg">
                <img src="{{ImgHostUrl+Product.ImgUrl}}" alt="" />
            </div>
            <img src="/Content/images/f_close.png" alt="关闭" class="fclose" />
            <div class="fpopProInfo">
                <p class="fpopProName" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{Product.Name}}</p>
                <div class="fpopProPrice"><span class="fh">¥</span>{{SelectSpec.Id>0?SelectSpec.Price:Product.Price}}</div>
            </div>
        </div>

        <h3 class="fgzhd">规格</h3>
        <div class="fgzBox">
            <input type="button" ng-repeat="spec in SpecList" value="{{spec.SpecNames}}" ng-click="ChooseSpec($event,spec)" />

        </div>
        <div class="fgzslR">
            <span class="slhd">数量</span>
            <div class="fgzslrs">
                <span class="reduce" ng-click="reduce_one()">-</span>
                <input type="number" ng-model="SelectSpecNum" id="input" class="input"  />
                <span class="add" ng-click="plus_one();">+</span>
            </div>
        </div>
        <ul class="fgzBtns" ng-show="ActivityId==0">
            <li class="lf"><a href="" ng-click="AddShopCart()">加入购物车</a></li>
            <li class="rf"><a href="" ng-click="Buy()">立即购买</a></li>
        </ul>
    </div>

    <!--end 弹出商品规格属性 -->
</div>

<script type="text/javascript">
    var time_end = 0;
    var time_begin = 0;
    App.controller('ProductDetailCtrl', [
            '$scope', '$http', '$rootScope', 'Reddit', '$stateParams', '$state', '$timeout',
        function ($scope, $http, $rootScope, Reddit, $stateParams, $state, $timeout) {

            $scope.SelectSpec = {};
            $scope.SelectSpecText = "";
            $scope.SelectSpecNum = 1;
            $scope.CommentShow = true
            ;
            $scope.ActType = 0;
            $scope.ActivityId = ($stateParams.activityId == undefined ? 0 : $stateParams.activityId);
            if ($scope.ActivityId > 0) {
                $scope.ActType = 3;
            }
            //数据初始化
            $http.post("/Product/ProductDetail", { Sku: $stateParams.sku, ActivityId: $scope.ActivityId }).then(function (response) {
                if (!response.data) {
                    $state.go("message", { msg: "该商品已下架或不存在" }, { location: 'replace' });
                    return;
                }
                //time_end = response.data.SpikeTimeSpans;
                $scope.Product = response.data.ProductMain;
                $scope.SpecList = response.data.SpecList;
                $scope.ShopCartCount = response.data.ShopCartCount;
                $scope.IsFavorited = response.data.IsFavorited;

                $scope.ShareTittle = response.data.ShareTittle;
                $scope.ShareContent = response.data.ShareContent;
                $scope.ShareImg = response.data.ShareImg;

                //$scope.lunboImgUrls = [];
                //$scope.lunboImgUrls.push($rootScope.ImgHostUrl + $scope.Product.ImgUrl);
                //if ($scope.Product.SubImgUrls.length > 0) {
                //    angular.forEach($scope.Product.SubImgUrls, function (imgurl) {
                //        $scope.lunboImgUrls.push($rootScope.ImgHostUrl + imgurl);
                //    });
                //}
                
               
                var tt = function () {
                    $rootScope.WxShare($scope.ShareTittle, $scope.ShareContent, location.href, $rootScope.ImgHostUrl + $scope.ShareImg);

                    $("#detail").find("img").css("width", "");

                    TouchSlide({
                        slideCell: "#focus",
                        titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
                        mainCell: ".bd ul",
                        effect: "left",
                        autoPlay: true, //自动播放
                        autoPage: true, //自动分页
                    });
                }

                setTimeout(tt, 500)

                if ($scope.Product.TotalStock <= 0) {
                    $("#times_container").html('已售罄');
                    $(".w_qgspDetl_a").addClass('f_time_out');
                    //$(".w_prodetl_aa p").addClass('grab_end');
                    //$(".w_prodetl_aa p").html('库存已售完');
                }




                if ($scope.ActivityId > 0) {
                    time_end = new Date(response.data.SpikeEndTime);  // 设定活动结束结束时间
                    time_end = time_end.getTime();
                    time_begin = new Date(response.data.SpikeBeginTime);  // 设定活动结束结束时间
                    if (time_begin > new Date()) {
                        $("#spike_begin").show();
                        $("#spike_end").hide();
                    } else {
                        $("#spike_begin").hide();
                        $("#spike_end").show();
                    }
                    time_begin = time_begin.getTime();
                    $timeout(function () {
                        setTimeout("count_down(" + time_end + ")", 1000);//设置每一秒调用一次倒计时函数
                        setTimeout("count_down_begin(" + time_begin + ")", 1000);//设置每一秒调用一次倒计时函数
                    });
                }


                if ($scope.SpecList.length > 1) {
                    $scope.SelectSpec.Id = 0;
                } else {
                    $scope.SelectSpec = angular.copy($scope.SpecList[0]);
                }

                $scope.reddit = new Reddit("/Product/CommentList", { Take: 5, Sku: $stateParams.sku }, function (response) { });
                //console.log($scope.reddit);
                $scope.reddit.nextPage();

                // 设置轮播图图片间隔
                $scope.myInterval = 3000;
                // 轮播图数据初始化
                var slides = $scope.slides = [];
                // 添加轮播图源
                slides.push({ image: $rootScope.ImgHostUrl + $scope.Product.ImgUrl });
                if ($scope.Product.SubImgUrls.length > 0) {
                    angular.forEach($scope.Product.SubImgUrls, function (imgurl) {
                        slides.push({ image: $rootScope.ImgHostUrl + imgurl });
                    });
                }


            });



            //收藏
            $scope.Favorite = function () {
                //layer.load(2);
                $http.post("/Product/ProductFavorite", { Sku: $stateParams.sku }).then(function (returnData) {
                    //layer.closeAll('loading');
                    $scope.IsFavorited = returnData.data;

                });
            }

            //数量
            $scope.reduce_one = function () {
                if ($scope.SelectSpecNum > 1) {
                    $scope.SelectSpecNum = $scope.SelectSpecNum - 1;
                } else {
                    $scope.SelectSpecNum = 1;
                }
            }
            $scope.plus_one = function () {
                $scope.SelectSpecNum = $scope.SelectSpecNum + 1;
            }

            //选择规格
            $scope.ChooseSpec = function (event, spec) {
                $scope.SelectSpec = angular.copy(spec);
                $scope.SelectSpecText = spec.SpecNames;
                $(".fgzBox input").removeClass("w_proprty414_active");
                $(event.target).addClass("w_proprty414_active");
            }

            //加入购物车
            $scope.AddShopCart = function () {
                if ($scope.SelectSpec.Id == 0) {
                    layer.msg("请选择商品规格");
                }
                else if ($scope.SelectSpecNum < 1)
                {
                    layer.msg("请输入正确的数量");
                }
                else {
                    layer.load(2);
                    $http.post("/Product/AddShopCart", { Sku: $stateParams.sku, SpecId: $scope.SelectSpec.Id, Num: $scope.SelectSpecNum }).then(function (returnData) {
                        layer.closeAll('loading');
                        $scope.ShopCartCount = returnData.data;
                        $(".fclose ").click();
                    });
                }
            }

            //立即购买
            $scope.Buy = function () {
                $scope.CheckedCartList = [];
                if ($scope.SelectSpec.Id == 0) {
                    layer.msg("请选择商品规格");
                }
                else if ($scope.SelectSpecNum < 1) {
                    layer.msg("请输入正确的数量");
                }
                else {
                    $state.go("shop.orderconfirm", { cartids: "", specId: $scope.SelectSpec.Id, num: $scope.SelectSpecNum, activityId: $stateParams.activityId, activityType: $scope.ActType });
                }
            }




        }]);
</script>
<script type="text/javascript">
    $(".w_excdtlMenu_ul li").click(function () {
        var index = $(this).index();
        $(".w_excdtlMenu_ul li").removeClass("w_exmenu_default");
        $(this).addClass("w_exmenu_default");
        $(".w_change").hide();
        $(".w_change").eq(index).show();
    });

    $(".w_qgxq_collect").click(function () {
        $(this).hide();
        $(".w_qgxq_collected").show();
    });
    $(".w_qgxq_collected").click(function () {
        $(this).hide();
        $(".w_qgxq_collect").show();
    });
    var h = $(document).height();
    $(function () {
        $(".w_qgxqBot_b ").click(function () {
            $(".f_popBox").show();
            $(".f_popBox").css("height", h);
            $(".hideGZ").show();
            $(".w_jfxqbot_fixed").hide();
        });
        $(".w_qgxqBot_c ").click(function () {
            $(".f_popBox").show();
            $(".f_popBox").css("height", h);
            $(".hideGZ").show();
            $(".w_jfxqbot_fixed").hide();
        });
        $(".w_jfdhxq_property ").click(function () {
            $(".f_popBox").show();
            $(".f_popBox").css("height", h);
            $(".hideGZ").show();
            $(".w_jfxqbot_fixed").hide();
        });
        $(".fclose ").click(function () {
            $(".f_popBox").hide();
            $(".f_popBox").css("height", h);
            $(".hideGZ").hide();
            $(".w_jfxqbot_fixed").show();
        });
    })


    // 倒计时

    //获取容器元素 var times_container = document.getElementById("times_container");

    //定义倒计时函数
    function count_down(time_end) {
        if (time_end != undefined) {
            //根据天，时，分，秒的ID找到相对应的元素
            var time_day = $("#times_day");
            var time_hour = $("#times_hour");
            var time_minute = $("#times_minute");
            var time_second = $("#second");

            var time_now = new Date();  // 获取当前时间
            time_now = time_now.getTime();

            var time_distance = time_end - time_now;  // 时间差：活动结束时间减去当前时间
            var int_day, int_hour, int_minute, int_second;
            if (time_distance >= 0) {
                // 相减的差数换算成天数
                int_day = Math.floor(time_distance / 86400000)
                time_distance -= int_day * 86400000;
                // 相减的差数换算成小时
                int_hour = Math.floor(time_distance / 3600000)
                time_distance -= int_hour * 3600000;
                // 相减的差数换算成分钟
                int_minute = Math.floor(time_distance / 60000)
                time_distance -= int_minute * 60000;
                // 相减的差数换算成秒数
                int_second = Math.floor(time_distance / 1000)
                // 判断小时小于10时，前面加0进行占位
                if (int_hour < 10)
                    int_hour = "0" + int_hour;
                // 判断分钟小于10时，前面加0进行占位
                if (int_minute < 10)
                    int_minute = "0" + int_minute;
                // 判断秒数小于10时，前面加0进行占位
                if (int_second < 10)
                    int_second = "0" + int_second;
                // 显示倒计时效果
                time_day.html(int_day);
                time_hour.html(int_hour);
                time_minute.html(int_minute);
                time_second.html(int_second);
                setTimeout("count_down(" + time_end + ")", 1000);
            } else {

                //如果您想在活动结束后提示什么信息，就写在下边的单引号内
                $("#times_container").html('对不起，活动结束!!');
                $(".w_qgspDetl_a").addClass('f_time_out');
            }
        }
    }




    //定义倒计时函数
    function count_down_begin(time_begin) {
        //根据天，时，分，秒的ID找到相对应的元素
        var time_day = document.getElementById("times_day_begin");
        var time_hour = document.getElementById("times_hour_begin");
        var time_minute = document.getElementById("times_minute_begin");
        var time_second = document.getElementById("second_begin");

        var time_now = new Date();  // 获取当前时间
        time_now = time_now.getTime();
        var time_distance = time_begin - time_now;  // 时间差：活动结束时间减去当前时间
        var int_day, int_hour, int_minute, int_second;
        if (time_distance >= 0) {
            // 相减的差数换算成天数
            int_day = Math.floor(time_distance / 86400000)
            time_distance -= int_day * 86400000;
            // 相减的差数换算成小时
            int_hour = Math.floor(time_distance / 3600000)
            time_distance -= int_hour * 3600000;
            // 相减的差数换算成分钟
            int_minute = Math.floor(time_distance / 60000)
            time_distance -= int_minute * 60000;
            // 相减的差数换算成秒数
            int_second = Math.floor(time_distance / 1000)
            // 判断小时小于10时，前面加0进行占位
            if (int_hour < 10)
                int_hour = "0" + int_hour;
            // 判断分钟小于10时，前面加0进行占位
            if (int_minute < 10)
                int_minute = "0" + int_minute;
            // 判断秒数小于10时，前面加0进行占位
            if (int_second < 10)
                int_second = "0" + int_second;
            // 显示倒计时效果
            time_day.innerHTML = int_day;
            time_hour.innerHTML = int_hour;
            time_minute.innerHTML = int_minute;
            time_second.innerHTML = int_second;
            setTimeout("count_down_begin(" + time_begin + ")", 1000);

        } else {

            //如果您想在活动结束后提示什么信息，就写在下边的单引号内

            $("#spike_begin").hide();
            $("#spike_end").show();

        }
    }

</script>
